<template>
  <FormBlock :title="$t('module.resourceManage.parentUI')" direction="column" id="select_parent_ui_resource">
    <div style="display: flex; padding: 0 10px 10px;">
      <Input v-model="searchKeyWords" :placeholder="$t('module.resourceManage.enterSourceName')" clearable @keyup.enter.native="onSearch" />
      <RPButton style="margin-left: 10px; background: #FF6F4B;" optType="search" @click="onSearch" />
    </div>
    <el-tree
      ref="tree"
      :data="parentNodeList"
      :props="defaultProps"
      node-key="id"
      :render-content="renderContent"
      class="tree-box"
      icon-class="ivu-icon-ios-arrow-forward"
      highlight-current
      :expand-on-click-node="false"
      show-checkbox
    ></el-tree>
  </FormBlock>
</template>

<script>
import locales from './locales.js'
import { getParentUi } from '@/api/resourceApi.js';

export default {
  mixins: [locales],
  props: {
    parentResourceId: {
      type: String,
      default: ''
    },
    applicationId: {
      type: String,
      default: ''
    },
    functionForm: {
      type: Object,
      default() {
        return {}
      }
    },
    resourceObj: {
      type: Object,
      default() {
        return null
      }
    },
    canCreateUI: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
  data() {
    return {
      searchKeyWords: '',
      parentNodeList: [],
      defaultProps: {
        label: 'name',
        children: 'children',
        isLeaf: 'isLeaf'
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    formatTree(originData) {
      const res = []
      originData.forEach(item => {
        if (item.enabled === 0) return
        if (item.resourceChildren) {
          // 若该资源的父UI资源只有该资源一个，不显示该资源的父资源
          if (this.resourceObj && item.resourceChildren.length === 1 && item.resourceChildren[0].id === this.resourceObj.id) {
            return
          } else {
            item.children = this.formatTree(item.resourceChildren)
            if (this.resourceObj && item.resourceChildren.some(ele => ele.id === this.resourceObj.id)) {
              item.disabled = true
            }
          }
        }
        // 不显示该资源及其下属资源
        if (this.resourceObj && (item.id === this.resourceObj.id || this.resourceObj.id === item.parentResourceId)) return
        res.push({
          ...item,
          code: item.resourceCode,
          name: item.resourceName
        })
      })
      return res
    },
    init() {
      if (this.resourceObj !== null) {
        const args = {
          applicationId: this.applicationId,
          functionId: this.functionForm.id,
          exId: this.resourceObj.id,
          resourceTypes: [this.resourceObj.resourceType]
        }
        getParentUi(args).then(res => {
          console.log('getParentUi 111111: ', res)
          this.parentNodeList.splice(0)
          this.formatTree(res.data).forEach(item => {
            this.parentNodeList.push(item)
          })
          console.log('parentNodeList 111111: ', this.parentNodeList)
        })
      } else if (this.canCreateUI) {
        const args = {
          applicationId: this.applicationId,
          functionId: this.functionForm.id,
          resourceTypes: [1]
        }
        getParentUi(args).then(res => {
          console.log('getParentUi 222222: ', res)
          if (res.data) {
            this.parentNodeList.splice(0)
            this.formatTree(res.data).forEach(item => {
              this.parentNodeList.push(item)
            })
          }
          console.log('parentNodeList 222222: ', this.parentNodeList)
        })
      }
    },
    onSearch() {
      if (this.resourceObj !== null) {
        const args = {
          applicationId: this.applicationId,
          functionId: this.functionForm.id,
          exId: this.resourceObj.id,
          resourceTypes: [this.resourceObj.resourceType],
          resourceName: this.searchKeyWords,
          enabled: 1
        }
        getParentUi(args).then(res => {
          console.log('getParentUi 333333: ', res)
          this.parentNodeList.splice(0)
          this.formatTree(res.data).forEach(item => {
            this.parentNodeList.push(item)
          })
          console.log('parentNodeList 333333: ', this.parentNodeList)
        })
      } else if (this.canCreateUI) {
        const args = {
          applicationId: this.applicationId,
          functionId: this.functionForm.id,
          resourceTypes: [1],
          resourceName: this.searchKeyWords
        }
        getParentUi(args).then(res => {
          console.log('getParentUi 444444: ', res)
          if (res.data) {
            this.parentNodeList.splice(0)
            this.formatTree(res.data).forEach(item => {
              this.parentNodeList.push(item)
            })
          }
          console.log('parentNodeList 444444: ', this.parentNodeList)
        })
      }
    },
    renderContent(h, { data }) {
      return h(
        'span',
        {
          style: {
            display: 'inline-block',
            width: '100%'
          },
          class: ['tree-row', data.selected ? 'tree-row-selected' : '']
        },
        [
          h('span', [
            h('Icon', {
              props: {
                type: 'ios-paper-outline'
              },
              style: {
                marginRight: '8px',
                fontSize: '14px'
              }
            }),
            h(
              'span',
              {
                class: 'ivu-tree-title',
                style: {
                  fontSize: '14px'
                },
                on: {
                  click: () => {
                    if (this.resourceObj && data.resourceChildren && data.resourceChildren.some(ele => ele.id === this.resourceObj.id)) return
                    console.log('mmmmmm: ', data)
                    this.$emit('Close', data)
                  }
                },
                attrs: {
                  title: data.name
                }
              },
              data.name
            )
          ])
        ]
      )
    }
  }
}
</script>

<style lang="less">
#select_parent_ui_resource {
  .el-tree {
    .el-tree-node {
      .el-tree-node__content {
        label.el-checkbox {
          .el-checkbox__input {
            display: none;
          }
        }
      }
    }
  }
}
</style>
